<template>
  <div class="firend-message">
    <ul>
      <router-link to="detailMessage">
        <li
          v-for="(item, index) in dataList"
          :key="index"
          @click="openContact(item)"
        >
          <div class="firend-message-left">
            <img :src="item.talkAvatar" class="firend-picture" />
          </div>
          <div class="firend-message-right">
            <div class="detailed-message">
              <h6>{{ item.talkName }}</h6>
              <p>{{ item.talkSketch }}</p>
            </div>
            <div class="firend-time">{{ item.talkTime | formatDate }}</div>
          </div>
        </li></router-link
      >
    </ul>
    <div>
      <el-pagination
        background
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="dataList.lenght"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      currentPage: 1,
       chatRecordList: [],
      pageSize: 10,
      userInfo: this.$store.state.userInfo,
    };
  },
  props: ["dataList"],
  filters: {
      formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy-MM-dd hh:mm");
      }

      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("transPage", val);
    },
    openContact(item) {
      this.$emit("transChat",item)
    } 
  },
};
</script>

<style>
.firend-picture {
  width: 50px;
  height: 50px;
  border-radius: 90px;
}
.firend-message ul li {
  height: 70px;
  display: flex;
  align-items: center;
}
.firend-message ul li:hover {
  background: #f8f9fd;
}
.firend-message-right {
  width: 95%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.detailed-message {
  line-height: 1.5;
}
.detailed-message h6 {
  font-size: 14px;
  color: #000;
  font-weight: normal;
}
.detailed-message p,
.firend-time {
  font-size: 12px;
  color: #8d8c8c;
}
</style>
